'use client'

import { useEffect, useRef, useState } from "react";
import { drawData } from "./util";
import { FieldType } from "@/actions/listDeal";
import { Button, Form, Space, DatePicker } from "antd";
import dayjs from "dayjs";
import { useRouter, usePathname } from "next/navigation";
import printJS from "print-js";
const { RangePicker } = DatePicker;
type PropsGridCom = {
    dataList: FieldType[],
    timeList: string[]
}
export default function GridCom({ dataList, timeList }: PropsGridCom) {
    const canvasInstance = useRef<HTMLCanvasElement>()
    const defaultTimeRange = [dayjs().subtract(90, 'day'), dayjs()]

    useEffect(() => {
        if (!dataList || dataList.length == 0) {
            return
        }
        canvasInstance.current = document.getElementById('myCanvas') as HTMLCanvasElement;
        if (canvasInstance.current) {
            const ctx = canvasInstance.current.getContext('2d');
            if (ctx) {
                drawData(ctx, canvasInstance.current, dataList)
            }
        }

    });
    const [isPrint, setIsPrint] = useState(false)
    const router = useRouter()
    const pathname = usePathname()

    return <div >
        <div className="h-20 md:h-14 flex justify-center  items-center">
            <Form
                layout='inline'
                initialValues={
                    {
                        time: defaultTimeRange
                    }
                }
                onFinish={(values) => {
                    router.push(`${pathname}?start=${values.time[0].format('YYYY-MM-DD')}&end=${values.time[1].format('YYYY-MM-DD')}`)

                }}>
                <Space>
                    <Form.Item
                        name="time"
                        label="日期范围"
                        rules={[{ required: true, message: '日期范围 is required!' }]}
                    >

                        <RangePicker ></RangePicker>
                    </Form.Item>
                    <Form.Item label="">
                        <Space> <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                            <Button onClick={() => {
                                setIsPrint(true)
                                setTimeout(() => {
                                    printJS({
                                        printable: 'canvas_print',
                                        type: 'html',
                                        header: '<h1>体温记录表</h1>',
                                        // css: '/print.css',
                                        scanStyles: false,
                                        // targetStyles: ['*'],
                                        style: 'body {font-size: 20px;}'
                                    })
                                    setTimeout(() => {
                                        setIsPrint(false)
                                    }, 1000)
                                }, 100)

                            }} >
                                打印
                            </Button>
                        </Space>

                    </Form.Item>
                </Space>
            </Form>
        </div>
        <div id="canvas_print" className="w-[1000px] m-auto h-[300px] mt-5  relative">
            {isPrint && <h3 style={{ textAlign: "center", marginBottom: '20px' }}>{timeList[0]}到{timeList[1]}</h3>}
            <canvas id="myCanvas" className="w-full h-full"></canvas>
            {/* <canvas id="xGrid" className="w-full h-5"></canvas> */}
        </div>;
    </div>

}